<template>
    <div class="container-add-ann">
        <a-modal width="1300px" :visible="visible" title="信息详情" @cancel="closeModal" class="yuan-modal add-anninfo"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form">
                    <a-form-model layout="inline" class="yuan-form" ref="form" :rules="rules" :model="formData"
                        :label-col="{ style: { width: '160px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">
                        <div class="form-panel">
                            <div class="form-title">公示审核</div>
                            <div class="form-panel-box yuan-form-col3">
                                <a-form-model-item class="yuan-form-item" label="科技成果名称" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementName}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="科技成果种类" prop="">
                                    <span class="yuan-form-input">{{detailInfo.achievementCategory}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item" label="转化方式" prop="conversionWay">
                                    <a-radio-group v-model="formData.conversionWay">
                                        <a-radio value="转让">转让</a-radio>
                                        <a-radio value="许可">许可</a-radio>
                                        <a-radio value="其他">其他</a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                            </div>
                        </div>
                        <div class="form-panel">
                            <div class="form-title">科技人员取得职务科技成果转化现金奖励信息</div>
                            <div class="form-panel-box yuan-form-col5">
                                <a-form-model-item class="yuan-form-item" label="取得转化收入金额(万元)" prop="gainConversionMoney"
                                    :label-col="{ style: { width: '180px' } }"
                                    :wrapper-col="{ style: { width: 'calc(100% - 180px)' } }">
                                    <a-input class="yuan-form-input" v-model="formData.gainConversionMoney"
                                        placeholder="取得转化收入金额"></a-input>
                                </a-form-model-item>
                                <div class="scale-box scale-box-show">
                                    <div class="small-title">科技成果现金奖励人员信息</div>
                                    <template v-for="(item,idx) in userListOne">
                                        <div class="user-panel-parent">
                                            <div class="user-panel">
                                                <a-form-model-item class="yuan-form-item" label="姓名"
                                                    :prop="'userListOne_'+idx+'_name'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListOne_'+idx+'_name']" placeholder="姓名"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="性别"
                                                    :prop="'userListOne_'+idx+'_gender'">
                                                    <a-select style="width:200px" class="yuan-form-input"
                                                        v-model="formData['userListOne_'+idx+'_gender']" placeholder="请选择性别">
                                                        <a-select-option value="男">男</a-select-option>
                                                        <a-select-option value="女">女</a-select-option>
                                                    </a-select>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="学院(校内)/单位(校外)"
                                                    :prop="'userListOne_'+idx+'_schoolWithinOuter'">
                                                    <!-- <a-input class="yuan-form-input"
                                                    v-model="formData['userListOne_'+idx+'_schoolWithinOuter']"
                                                    placeholder="学院（校内）/单位（校外）"></a-input> -->

                                                    <a-radio-group v-model="formData['userListOne_'+idx+'_schoolWithinOuter']">
                                                        <a-radio value="校内">校内</a-radio>
                                                        <a-radio value="校外">校外</a-radio>
                                                    </a-radio-group>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="职务"
                                                    :prop="'userListOne_'+idx+'_post'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListOne_'+idx+'_post']" placeholder="职务"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="身份证号"
                                                    :prop="'userListOne_'+idx+'_identityCard'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListOne_'+idx+'_identityCard']"
                                                        placeholder="身份证号"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="贡献比例"
                                                    :prop="'userListOne_'+idx+'_contributionRatio'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListOne_'+idx+'_contributionRatio']"
                                                        placeholder="贡献比例"></a-input>
                                                </a-form-model-item>
                                            </div>
                                            <div class="user-panel-action">
                                                <a-button @click="addUserOne" type="primary" style="margin-bottom:10px">
                                                    新增
                                                </a-button>
                                                <a-button @click="delUserOne(idx)" type="danger">
                                                    删除
                                                </a-button>
                                            </div>

                                        </div>
                                    </template>

                                    <div class="small-title">科技成果现金奖励信息</div>
                                    <a-form-model-item class="yuan-form-item" label="科技成果现金奖励总额(万元)" prop="achievementAwardRental"
                                        :label-col="{ style: { width: '200px' } }"
                                        :wrapper-col="{ style: { width: 'calc(100% - 200px)' } }">
                                        <a-input class="yuan-form-input" v-model="formData.achievementAwardRental"
                                            placeholder="科技成果现金奖励总额"></a-input>
                                    </a-form-model-item>
                                </div>
                            </div>

                        </div>

                        <div class="form-panel">
                            <div class="form-title">科技成果转化重要贡献人奖励公示信息</div>
                            <div class="form-panel-box yuan-form-col5">
                                <a-form-model-item class="yuan-form-item" label="转化收入（万元）" prop="conversionIncome">
                                    <a-input class="yuan-form-input" v-model="formData.conversionIncome"
                                        placeholder="转化收入"></a-input>
                                </a-form-model-item>
                                <div class="scale-box scale-box-show">
                                    <div class="small-title">成果转化重要贡献人信息</div>
                                    <template v-for="(item,idx) in userListTwo">
                                        <div class="user-panel-parent">
                                            <div class="user-panel">
                                                <a-form-model-item class="yuan-form-item" label="姓名"
                                                    :prop="'userListTwo_'+idx+'_name'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_name']" placeholder="姓名"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="性别"
                                                    :prop="'userListTwo_'+idx+'_gender'">
                                                    <a-select style="width:200px" class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_gender']" placeholder="请选择性别">
                                                        <a-select-option value="男">男</a-select-option>
                                                        <a-select-option value="女">女</a-select-option>
                                                    </a-select>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="岗位职务"
                                                    :prop="'userListTwo_'+idx+'_post'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_post']" placeholder="职务"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="身份证号"
                                                    :prop="'userListTwo_'+idx+'_identityCard'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_identityCard']"
                                                        placeholder="身份证号"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="贡献率"
                                                    :prop="'userListTwo_'+idx+'_rateOfContribution'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_rateOfContribution']"
                                                        placeholder="贡献率"></a-input>
                                                </a-form-model-item>
                                                <a-form-model-item class="yuan-form-item" label="奖励金额(万元)"
                                                    :prop="'userListTwo_'+idx+'_awardMoney'">
                                                    <a-input class="yuan-form-input"
                                                        v-model="formData['userListTwo_'+idx+'_awardMoney']"
                                                        placeholder="奖励金额"></a-input>
                                                </a-form-model-item>
                                            </div>
                                            <div class="user-panel-action">
                                                <a-button @click="addUserTwo" type="primary" style="margin-bottom:10px">
                                                    新增
                                                </a-button>
                                                <a-button @click="delUserTwo(idx)" type="danger">
                                                    删除
                                                </a-button>
                                            </div>

                                        </div>
                                    </template>

                                    <div class="small-title">成果转化重要贡献奖励信息</div>
                                    <a-form-model-item class="yuan-form-item" label="奖励总额（万元）" prop="achievementTransitionMoney">
                                        <a-input class="yuan-form-input" v-model="formData.achievementTransitionMoney"
                                            placeholder="奖励总额"></a-input>
                                    </a-form-model-item>
                                </div>
                            </div>

                        </div>
                    </a-form-model>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalOk" type="primary" :loading="loading">
                    保存
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: {} }) detailInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.formData = {};
        }
    }
    formData = {};
    loading = false;
    rules = {};
    rulesDef = {
        conversionWay: [{ required: true, message: "请选择转化方式", trigger: "change" }],
        gainConversionMoney: [{ required: true, message: "请输入转化金额", trigger: "change" }],
        achievementAwardRental: [{ required: true, message: "请输入科技成果现金奖励总额", trigger: "change" }],
        conversionIncome: [{ required: true, message: "请输入转化收入", trigger: "change" }],
        achievementTransitionMoney: [{ required: true, message: "请输入奖励总额", trigger: "change" }],
    };
    async mounted() {
        this.userListChage();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;
            this.loading = true;
            try {
                const listOne: any = this.userListOne.map((item, idx) => {
                    return {
                        type: item.type,
                        contributionRatio: this.formData[`userListOne_${idx}_contributionRatio`],
                        identityCard: this.formData[`userListOne_${idx}_identityCard`],
                        name: this.formData[`userListOne_${idx}_name`],
                        gender: this.formData[`userListOne_${idx}_gender`],
                        post: this.formData[`userListOne_${idx}_post`],
                        schoolWithinOuter: this.formData[`userListOne_${idx}_schoolWithinOuter`],
                    };
                });
                const listTwo: any = this.userListTwo.map((item, idx) => {
                    return {
                        type: item.type,
                        name: this.formData[`userListTwo_${idx}_name`],
                        gender: this.formData[`userListTwo_${idx}_gender`],
                        post: this.formData[`userListTwo_${idx}_post`],
                        awardMoney: this.formData[`userListTwo_${idx}_awardMoney`],
                        identityCard: this.formData[`userListTwo_${idx}_identityCard`],
                        rateOfContribution: this.formData[`userListTwo_${idx}_rateOfContribution`],
                    };
                });
                const data = {
                    id: this.detailInfo.id,
                    formulaAwardList: listOne.concat(listTwo),
                    ...this.formData,
                };

                const res = await api.addFormulaInfo(data);
                this.$message.success("保存成功");
                this.closeModal();
                this.$emit("resetList");
            } finally {
                this.loading = false;
            }
        });
    }
    userListOne = [{ type: "KJRY" }];
    addUserOne() {
        this.userListOne.push({ type: "KJRY" });
        this.userListChage();
    }
    delUserOne(idx) {
        this.userListOne.splice(idx, 1);
        this.userListChage();
    }

    userListChage() {
        this.rules = { ...this.rulesDef };
        this.userListOne.forEach((item, idx) => {
            this.rules["userListOne_" + idx + "_name"] = [{ required: true, message: "请输入姓名", trigger: "change" }];
            this.rules["userListOne_" + idx + "_gender"] = [{ required: true, message: "请输入性别", trigger: "change" }];
            this.rules["userListOne_" + idx + "_schoolWithinOuter"] = [{ required: true, message: "请输入", trigger: "change" }];
            this.rules["userListOne_" + idx + "_post"] = [{ required: true, message: "请输入职务", trigger: "change" }];
            this.rules["userListOne_" + idx + "_identityCard"] = [
                { required: true, message: "请输入身份证号", trigger: "change" },
            ];
            this.rules["userListOne_" + idx + "_contributionRatio"] = [
                { required: true, message: "请输入贡献比例", trigger: "change" },
            ];
        });

        this.userListTwo.forEach((item, idx) => {
            this.rules["userListTwo_" + idx + "_name"] = [{ required: true, message: "请输入姓名", trigger: "change" }];
            this.rules["userListTwo_" + idx + "_gender"] = [{ required: true, message: "请输入性别", trigger: "change" }];
            this.rules["userListTwo_" + idx + "_post"] = [{ required: true, message: "请输入职务", trigger: "change" }];
            this.rules["userListTwo_" + idx + "_awardMoney"] = [{ required: true, message: "请输入奖励金额", trigger: "change" }];
            this.rules["userListTwo_" + idx + "_identityCard"] = [
                { required: true, message: "请输入身份证号", trigger: "change" },
            ];
            this.rules["userListTwo_" + idx + "_rateOfContribution"] = [
                { required: true, message: "请输入贡献率", trigger: "change" },
            ];
        });
    }

    userListTwo = [{ type: "KJCG" }];
    addUserTwo() {
        this.userListTwo.push({ type: "KJCG" });
        this.userListChage();
    }
    delUserTwo(idx) {
        this.userListTwo.splice(idx, 1);
        this.userListChage();
    }
}
</script>

<style lang="scss">
.add-anninfo {
    .small-title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin-top: 20px;
    }
    .small-row-box {
        display: flex;
        align-items: center;
    }
    .small-row-title {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .user-panel-parent {
        display: flex;
    }
    .user-panel {
        background-color: #f7f7f7;
        padding: 15px;
        margin-top: 5px;
    }
    .user-panel-action {
        padding: 15px;
    }
    .user-info {
        display: inline-block;
        min-width: 150px;
        line-height: 30px;
        color: #82848a;
        margin-right: 40px;
    }
    .user-word {
        color: #333;
    }
    .scale-box {
        padding-bottom: 0px;
        max-height: 1px;
        overflow: hidden;
        transition: all 0.3s;
    }
    .scale-box-show {
        padding-bottom: 10px;
        max-height: 600px;
    }
    .scale-action {
        border-top: solid 1px #ccc;
        padding-top: 10px;
        text-align: center;
        cursor: pointer;
    }
}
</style>
